<template>
    <div class="articlelist">
        <div class="nodata" v-if="articleList.length === 0">
            <p style="color: rgb(253, 163, 62)">~~~~~~~</p>
        </div>
        <ul>
            <li class="articleinfo" v-for="item in articleList">
                <p class="title" @click="$router.push({name:'reviewArticle',query:{id:item._id }})">
                    {{item.title}}
                </p>
                <ul class="articledesc">
                    <li class="tag" v-for="tags in item.tags">
                        #{{tagsList[tags]}}
                    </li>
                    <li class="author">
                        {{item.author}}
                    </li>
                    <li class="visit_count">
                        {{item.visit_count}}阅读
                    </li>
                    <li class="publish_time">
                        {{item.publish_time.slice(0,10)}}
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: 'articlelist',
        props: ['articleList'],
        data() {
            return {
                tagsList: this.CONF.tags || {}
            };
        },
        created() {
        }
    };
</script>

<style lang="scss">
    .articlelist {
        .articleinfo {
            padding: 10px;
            height: 75px;
            width: 100%;
            border-bottom: 1px solid #aaa;
            .title{
                display: block;
                color: #2f2f2f;
                text-align: left;
                font-weight: 600;
                word-break: break-all;
                outline: none;
            }
            .articledesc {
                display: flex;
                width: 100%;
                justify-content: left;
                li {
                    height: 20px;
                    line-height: 20px;
                    padding: 5px;
                    display: inline-block;
                }
                .tag {
                    color: rgb(253, 163, 62);
                    font-size: 12px;
                }
                .visit_count{
                    font-size: 12px;
                    color: #666;
                }
                .publish_time{
                    font-size: 12px;
                }
            }
        }
    }
</style>
